<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import Vchart from '~/components/echarts/index.vue'
import scaleScreen from '~/components/scale-screen/scale-screen.vue'
import { useStatisDeviceByUserObject } from './hooks/index'
const { options, handleChartClick, selectchanged, init } =
  useStatisDeviceByUserObject()
defineProps<{ msg: string }>()

const count = ref(0)
const input = ref('element-plus')
init()
const curDate = ref('')

const toast = () => {
  ElMessage.success('Hello')
}

const value1 = ref(true)
</script>

<template>
  <scaleScreen :width="1920" :height="1080">
    <ComTemplate title="地市CMI对比" showDetails @getDetails="getDetails">
      <div style="width: 100%; height: 310px; position: relative">
        <Vchart
          :options="options"
          @chart-click="handleChartClick"
          @selectchanged="selectchanged"
        />
      </div>
    </ComTemplate>
    <h1 color="$ep-color-primary">{{ msg }}</h1>

    <p>
      See
      <a href="https://element-plus.org" target="_blank">element-plus</a> for
      more information.
    </p>

    <!-- example components -->
    <div class="mb-4">
      <el-button size="large" @click="toast">El Message</el-button>
    </div>



  </scaleScreen>
</template>

<style>
.ep-button {
  margin: 4px;
}
.ep-button + .ep-button {
  margin-left: 0;
  margin: 4px;
}
</style>
